<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-11-30 08:19:27
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-05-04 10:16:41
 * @FilePath: /things-admin/src/view/questiondetail/questiondetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

-->
<template>
  <div class="core">
    <div class="nav" v-show="select == 1 || select == 0">
      <div
        class="givepoint"
        :class="select == 0 ? 'active' : ''"
        @click="select = 0"
      >
        预览
      </div>
      <div @click="select = 1" :class="select == 1 ? 'active' : ''">列表</div>
    </div>
    <div class="content" v-show="select == 1">
      <div class="header">
        <Input
          type="text"
          v-model="Userphone"
          placeholder="手机号"
          style="width: 200px; margin-right: 10px"
        ></Input>
        <Input
          type="text"
          v-model="username"
          placeholder="用户名称"
          style="width: 200px; margin-right: 10px"
        ></Input>
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="listsearchdata"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="reset"
          >重置</Button
        >
      </div>
      <div class="body" style="margin-top: 20px">
        <Table border :columns="columns" :data="data">
          <template #action="{ row, index }">
            <Button
              type="primary"
              size="small"
              @click="enterDetail(row.memberId, row.phone)"
              >详情</Button
            >
          </template>
        </Table>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
          "
        >
          <div></div>
          <Page
            :total="total"
            show-sizer
            @on-change="changeSizeValue"
            @on-page-size-change="changePageSize"
          />
        </div>
      </div>
    </div>
    <div class="content">
      <Listdata
        v-show="select == 2"
        :detailData="detailData"
        :isShow="isShow"
        @close="close"
        :phone="phone"
      />
    </div>
    <div class="content">
      <Previewdata v-show="select == 0" />
    </div>
  </div>
</template>

<script>
import { questionnaire, questionnaired } from "@/base/api/Question";
import Listdata from "./listdata/Auestionnaried.vue";
import Previewdata from "./previewdata/Auestionnaried.vue";
export default {
  data() {
    return {
      select: 0,
      userid: "",
      detailData: {},
      username: "",
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      model: [],
      time: "",
      memberId: "",
      isShow: false,
      Userphone: "",
      phone: "",
      data: [],
      cityList: [
        {
          label: "18-50",
          value: 30,
        },
      ],
      columns: [
        {
          title: "用户ID",
          key: "memberId",
        },
        {
          title: "昵称",
          key: "nickname",
        },
        {
          title: "手机号",
          key: "phone",
        },

        {
          title: "答题时间",
          key: "created",
        },
        {
          title: "赠送积分",
          key: "jifen",
        },
        {
          title: "生日",
          key: "birthday",
        },

        {
          title: "操作",
          slot: "action",
          width: 300,
          align: "center",
          fixed: "right",
        },
      ],
    };
  },
  components: { Listdata, Previewdata },
  mounted() {
    this.questionnaire();
    this.questionnaireID();
  },
  methods: {
    //预览数据
    //列表数据搜索
    listsearchdata() {
      this.questionnaire();
    },
    //重置列表搜索数据
    reset() {
      this.userid = "";
      this.username = "";
      this.model = "";
      this.time = "";
      this.phone = "";
      this.Userphone = "";
      this.questionnaire();
    },
    //列表数据
    questionnaire() {
      questionnaire({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        questionnaireId: this.$route.query.id,
        phone: Number(this.Userphone) || "",
        nickname: this.username,
      }).then((res) => {
        this.data = res.data.items;
        this.total = res.data.itemCount;
      });
    },
    changeSizeValue(data) {
      this.pageIndex = data;
      this.questionnaire();
    },
    changePageSize(data) {
      this.pageSize = data;
      this.questionnaire();
    },
    changeDate(data) {
      this.time = data;
    },
    close(data) {
      this.select = data;
    },
    //进入详情
    enterDetail(memberId, phone) {
      this.select = 2;
      this.memberId = memberId;
      this.phone = phone;
      questionnaired(this.$route.query.id, this.memberId).then((res) => {
        // console.log(res);
        this.detailData = res.data;
        this.isShow = !this.isShow;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  margin: 10px 30px;
  font-size: 16px;
  border: 1px solid rgb(240, 240, 233);
  cursor: pointer;
  .givepoint {
    margin: 0 60px;
  }
  .active {
    border-bottom: 2px solid rgb(59, 91, 165);
    color: rgb(59, 91, 165);
  }
  div {
    padding: 10px;
  }
}
.content {
  margin: 40px;
  .header {
    height: 66px;
    //   width: 500px;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }
}
</style>
